<template>
	<!-- 购物车 -->
	<view id="shopcar">
		<veiw class="shopcar_header">
			<!-- 顶部名称 -->
<!-- 			<view class="top">
				<text class="top_del">删除</text>
				<view class="top_shop">购物车<text>(12)</text></view>
			</view> -->
			<!-- 地址 -->
			<view class="site">
				<image src="../../static/images/site@2x.png" />
				<view>送至:<text>成都市</text></view>
				<image src="../../static/images/cut@2x.png" />
			</view>
		</veiw>
		<!-- 身体 -->
		<view class="shopcar_main">
			<scroll-view scroll-y style="height: 100%;">
				<!-- 商品 -->
				<view class="commodity">
					<view class="commodity_copy">
						<!-- 头部 -->
						<view class="commodity_header">
							<!-- 全选 -->
							<view class="checkAll">
								<image src="../../static/images/pitch@2x.png" />
								<image style="display: none;" src="../../static/images/pitch_on@2x.png" />
							</view>
							<view class="commodity_name">李大爷菜摊</view>
							<image class="cut" src="../../static/images/cut@2x.png" />
						</view>
						<!-- 身体 -->
						<view class="commodity_main">
							<view class="commodity_main_copy">
								<!-- 选中图标 -->
								<view class="commodity_main_radio">
									<image src="../../static/images/pitch@2x.png" />
									<image style="display: none;" src="../../static/images/pitch_on@2x.png" />
								</view>
								<!-- 商品图片 -->
								<image class="commodity_main_img" src="../../static/images/NoPath@2x.png" />
								<!-- 详细信息 -->
								<view class="commodity_main_particulars">
									<view>字体</view>
									<view>特价</view>
									<!-- 价格 -->
									<view class="commodity_main_particulars_price">
										<text>￥</text>
										<text class="price">29.90</text>
										<text>￥49.00</text>
										<view class="commodity_main_particulars_addsub">
											<image src="../../static/images/-@2x.png" />
											<text class="number">1</text>
											<image src="../../static/images/+@2x.png" />
										</view>
									</view>
								</view>
							</view>
							<view class="commodity_main_copy">
								<!-- 选中图标 -->
								<view class="commodity_main_radio">
									<image src="../../static/images/pitch@2x.png" />
									<image style="display: none;" src="../../static/images/pitch_on@2x.png" />
								</view>
								<!-- 商品图片 -->
								<image class="commodity_main_img" src="../../static/images/NoPath@2x.png" />
								<!-- 详细信息 -->
								<view class="commodity_main_particulars">
									<view>字体</view>
									<view>特价</view>
									<!-- 价格 -->
									<view class="commodity_main_particulars_price">
										<text>￥</text>
										<text class="price">29.90</text>
										<text>￥49.00</text>
										<view class="commodity_main_particulars_addsub">
											<image src="../../static/images/-@2x.png" />
											<text class="number">1</text>
											<image src="../../static/images/+@2x.png" />
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 商品 -->
				<view class="commodity">
					<view class="commodity_copy">
						<!-- 头部 -->
						<view class="commodity_header">
							<!-- 全选 -->
							<view class="checkAll">
								<image src="../../static/images/pitch@2x.png" />
								<image style="display: none;" src="../../static/images/pitch_on@2x.png" />
							</view>
							<view class="commodity_name">李大爷菜摊</view>
							<image class="cut" src="../../static/images/cut@2x.png" />
						</view>
						<!-- 身体 -->
						<view class="commodity_main">
							<view class="commodity_main_copy">
								<!-- 选中图标 -->
								<view class="commodity_main_radio">
									<image src="../../static/images/pitch@2x.png" />
									<image style="display: none;" src="../../static/images/pitch_on@2x.png" />
								</view>
								<!-- 商品图片 -->
								<image class="commodity_main_img" src="../../static/images/NoPath@2x.png" />
								<!-- 详细信息 -->
								<view class="commodity_main_particulars">
									<view>字体</view>
									<view>特价</view>
									<!-- 价格 -->
									<view class="commodity_main_particulars_price">
										<text>￥</text>
										<text class="price">29.90</text>
										<text>￥49.00</text>
										<view class="commodity_main_particulars_addsub">
											<image src="../../static/images/-@2x.png" />
											<text class="number">1</text>
											<image src="../../static/images/+@2x.png" />
										</view>
									</view>
								</view>
							</view>
							<view class="commodity_main_copy">
								<!-- 选中图标 -->
								<view class="commodity_main_radio">
									<image src="../../static/images/pitch@2x.png" />
									<image style="display: none;" src="../../static/images/pitch_on@2x.png" />
								</view>
								<!-- 商品图片 -->
								<image class="commodity_main_img" src="../../static/images/NoPath@2x.png" />
								<!-- 详细信息 -->
								<view class="commodity_main_particulars">
									<view>字体</view>
									<view>特价</view>
									<!-- 价格 -->
									<view class="commodity_main_particulars_price">
										<text>￥</text>
										<text class="price">29.90</text>
										<text>￥49.00</text>
										<view class="commodity_main_particulars_addsub">
											<image src="../../static/images/-@2x.png" />
											<text class="number">1</text>
											<image src="../../static/images/+@2x.png" />
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 商品 -->
				<view class="commodity">
					<view class="commodity_copy">
						<!-- 头部 -->
						<view class="commodity_header">
							<!-- 全选 -->
							<view class="checkAll">
								<image src="../../static/images/pitch@2x.png" />
								<image style="display: none;" src="../../static/images/pitch_on@2x.png" />
							</view>
							<view class="commodity_name">李大爷菜摊</view>
							<image class="cut" src="../../static/images/cut@2x.png" />
						</view>
						<!-- 身体 -->
						<view class="commodity_main">
							<view class="commodity_main_copy">
								<!-- 选中图标 -->
								<view class="commodity_main_radio">
									<image src="../../static/images/pitch@2x.png" />
									<image style="display: none;" src="../../static/images/pitch_on@2x.png" />
								</view>
								<!-- 商品图片 -->
								<image class="commodity_main_img" src="../../static/images/NoPath@2x.png" />
								<!-- 详细信息 -->
								<view class="commodity_main_particulars">
									<view>字体</view>
									<view>特价</view>
									<!-- 价格 -->
									<view class="commodity_main_particulars_price">
										<text>￥</text>
										<text class="price">29.90</text>
										<text>￥49.00</text>
										<view class="commodity_main_particulars_addsub">
											<image src="../../static/images/-@2x.png" />
											<text class="number">1</text>
											<image src="../../static/images/+@2x.png" />
										</view>
									</view>
								</view>
							</view>
							<view class="commodity_main_copy">
								<!-- 选中图标 -->
								<view class="commodity_main_radio">
									<image src="../../static/images/pitch@2x.png" />
									<image style="display: none;" src="../../static/images/pitch_on@2x.png" />
								</view>
								<!-- 商品图片 -->
								<image class="commodity_main_img" src="../../static/images/NoPath@2x.png" />
								<!-- 详细信息 -->
								<view class="commodity_main_particulars">
									<view>字体</view>
									<view>特价</view>
									<!-- 价格 -->
									<view class="commodity_main_particulars_price">
										<text>￥</text>
										<text class="price">29.90</text>
										<text>￥49.00</text>
										<view class="commodity_main_particulars_addsub">
											<image src="../../static/images/-@2x.png" />
											<text class="number">1</text>
											<image src="../../static/images/+@2x.png" />
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- 底部结算 -->
		<view class="footer">
			<!-- 全选 -->
			<view class="checkAll">
				<image src="../../static/images/pitch@2x.png" />
				<image style="display: none;" src="../../static/images/pitch_on@2x.png" />全选
			</view>
			<view class="price">
				<view>总计：￥59.80</view>
				<view>(已优惠 ￥0 不含配送费)</view>
			</view>
			<view class="footer_last_child">
				<view @click="clickLink">结算(2)</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			clickLink() {
				uni.navigateTo({
					url: '../closeacc/closeacc',
				});
			}
		},
		onReady() {
			uni.setNavigationBarColor({
			    frontColor: '#ffffff',
			    backgroundColor: '#25CA47',
			})
			uni.setNavigationBarTitle({
			    title: '购物车',
			});
		}
	}
</script>

<style lang="less" scoped>
#shopcar {
  height: 100%;
  display: flex;
  flex-direction: column;
  // 头身尾布局
  // 头
  .shopcar_header {
    max-height: 256rpx;
    /* 顶部名称 */
    .top {
      height: 88rpx;
      background: #25CA47;
      display: flex;
      align-items: center;
      color: #ffffff;
      font-size: 24rpx;
      font-weight: 400;
      .top_del {
        padding-left: 20rpx;
      }
      .top_shop {
        font-size: 34rpx;
        font-weight: bold;
        padding-left: 180rpx;
        width: 240rpx;
        text-align: center;
        text {
          font-size: 24rpx;
          font-weight: 400;
          color: #fff;
        }
      }
    }
    /* 地址 */
    .site {
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: relative;
      padding: 16rpx 22rpx 16rpx 96rpx;
      font-size: 28rpx;
      font-weight: 400;
      color: #333;
      box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
      margin-bottom: 20rpx;
      background: #fff;
      image:first-child {
        width: 39rpx;
        height: 48rpx;
        position: absolute;
        left: 28rpx;
      }
      image:last-child {
        width: 14rpx;
        height: 26rpx;
      }
    }
  }
  // 身体
  .shopcar_main {
    flex: 1;
    overflow-y: scroll;
    /* 商品 */
    .commodity {
      padding: 0 20rpx;
      .commodity_copy {
        margin-bottom: 20rpx;
        border-radius: 8rpx;
        box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);
        background: #fff;
        /* 头部 */
        .commodity_header {
          border-bottom: 1px solid #f0edf1;
          display: flex;
          justify-content: space-between;
          align-items: center;
          height: 92rpx;
          position: relative;
          padding-left: 80rpx;
          padding-right: 20rpx;
          .checkAll {
            width: 40rpx;
            height: 40rpx;
            position: absolute;
            left: 20rpx;
            image {
              width: 100%;
              height: 100%;
            }
          }
          .cut {
            width: 14rpx;
            height: 26rpx;
          }
        }
        /* 身体 */
        .commodity_main_copy {
          display: flex;
          padding: 34rpx 20rpx 0 20rpx;
          /* 选中图标 */
          .commodity_main_radio {
            line-height: 120rpx;
            image {
              width: 40rpx;
              height: 40rpx;
            }
          }
          /* 商品图片 */
          .commodity_main_img {
            width: 120rpx;
            height: 120rpx;
            margin: 0 20rpx;
          }
          /* 详细信息 */
          .commodity_main_particulars {
            flex: 1;
            border-bottom: 1px solid #f7f4f7;
            padding-bottom: 26rpx;
            view:first-child {
              font-size: 24rpx;
              font-weight: 400;
              line-height: 34rpx;
            }
            view:nth-child(2) {
              height: 32rpx;
              width: 64rpx;
              border: 2rpx solid rgba(255, 102, 51, 1);
              border-radius: 24rpx;
              color: rgba(255, 102, 51, 1);
              font-size: 20rpx;
              text-align: center;
              line-height: 32rpx;
            }
            /* 详细信息价格 */
            .commodity_main_particulars_price {
              position: relative;
              text {
                color: #999;
                font-size: 20rpx;
                font-weight: bold;
              }
              .price {
                font-size: 34rpx;
                color: #f63;
                font-weight: bold;
              }
              /* 详细信息价格里的图标 */
              .commodity_main_particulars_addsub {
                position: absolute;
                right: 0;
                top: -4rpx;
                image {
                  width: 48rpx;
                  height: 48rpx;
                  vertical-align: middle;
                }
                .number {
                  font-size: 34rpx;
                  color: #000;
                  font-weight: bold;
                  display: inline-block;
                  width: 96rpx;
                  text-align: center;
                  line-height: 48rpx;
                  vertical-align: middle;
                }
              }
            }
          }
        }
      }
    }
  }
  /* 底部结算 */
  .footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    box-shadow: 0px -2rpx 2rpx rgba(0, 0, 0, 0.1);
    width: 100%;
    .checkAll {
      font-size: 30rpx;
      font-weight: 400;
      vertical-align: middle;
      padding-left: 40rpx;
      image {
        width: 40rpx;
        height: 40rpx;
        vertical-align: middle;
        margin-right: 20rpx;
      }
    }
    .price {
      flex: 1;
      text-align: center;
      color: #28c84d;
      view:first-child {
        font-size: 34rpx;
      }
      view:last-child {
        font-size: 20rpx;
      }
    }
    .footer_last_child {
      padding: 26rpx 40rpx;
      text-align: center;
      background: linear-gradient(to right bottom, #28c84e, #0fd41d);
      color: #fff;
      font-size: 34rpx;
    }
  }
}
</style>